Day02-CDN-Vue初始化

第 12 屆 iThome 鐵人賽

DAY 2

自我挑戰組

與Vue相遇系列第 2 篇

12th鐵人賽 vue.js vue學習筆記 vuejs

EdwardXiong

2020-09-16 17:12:46

1637 瀏覽

分享至

疫情影響，既有業務轉型。平常有在寫程式的我，突然被老闆叫去一個專案，開發客戶平台。

起先，還是挺興奮的，直到了解客戶需求後，先是愣住。因為內容表格增刪查找較多，如果用我既有的JS概念，恐怕操作DOM的情況下，永遠都結不了案。

苦思許久，也不斷的嘗試。每當做出一部分後，客戶就會要求增加功能，尤其是在畫面上不停地增刪改查資料內容。

寫了差不多5天之後，即便有MVVM的概念，我的程式碼幾乎接近崩潰的局面。很多時候，可能都不知道自己在寫什麼.......

直到第六天的凌晨，接到了一通來自廣州同事的電話。

廣州同事：既然你有了JS的概念，何不直接來個框架試試?

那時的我，腦中浮現的卻是：為什麼我要淪落到用框架......... Vue？她還是我認識的JS嗎？

電話結束後，直覺反應就是去問我的電腦(Javis)。Javis立刻啟動Google大神，並帶我聯絡了Vue。網頁前台也很客氣，立刻給了我妳的聯絡方式，讓我和妳約談：

我很迅速地進到了VS CODE，妳也很優雅地走了出來。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <title>Day02-CDN</title>
</head>

<body>
    <div id="app">
        <h3>{{title}}</h3>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            title: "哈囉我叫Vue"
        }
    })
</script>

Vue：哈囉您好，我叫Vue。上面這是我的聯絡方式：

引入CDN。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

資料規範時，需要一個特定模塊進行掛載，以上述為例，模塊為app。切記不能在模塊外新增其他區塊，資料也必須在模塊內使用。

<body>
    <div id="app">
        <h3>{{title}}</h3>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
    })
</script>

可在data屬性內，建立需要我處裡的資料，我會進行頁面掛載及其他處理。

<body>
    <div id="app">
        <h3>{{title}}</h3>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            title: "哈囉我叫Vue"
        }
    })
</script>

Vue：遵守以上原則，我才會願意提供其他服務喔！

第一次見到Vue，這麼親切，讓我更想知道她是否能幫助我，內心雖有疑惑，但好像找到了方向。

待續..........